<template>
    <div class="photoinfo-container">
        <!--头部区域-->
        <h1>{{ photoinfo.title }}</h1>
        <p class="subtitle">
            <span>发布时间：{{ photoinfo.add_time | dateFormat }}</span>
            <span>点击{{ photoinfo.click }}次</span>
        </p>
        <hr>

        <!-- 缩略图区域 -->
        <div class="thumbs">
            <vue-preview :slides="list" @close="handleClose"></vue-preview>
        </div>

        <!-- 图片内容区域 -->
        <div class="content" v-html="photoinfo.content"></div>

        <!--子组件区域  --------------把父组件的id传给子组件-->
        <cmt-box :id="id"></cmt-box>
    </div>
</template>

<script>
    import {Toast} from 'mint-ui'
    //导入子组件
    import comment from '../subcomponents/comment.vue'

    export default {
        data() {
            return {
                id: this.$route.params.id,   //从路由中获取图片的 id
                photoinfo: {},   //图片详情对象
                list: []   //缩略图数组
            }
        },
        created() {   //自动调用方法获取数据
            this.getPhotoInfo()
            this.getThumbs()
        },
        methods: {
            getPhotoInfo() {   //获取图片详情数据
                this.$http.get('api/getimageInfo/' + this.id).then(result => {
                    if (result.body.status === 0) {
                        //成功
                        this.photoinfo = result.body.message[0]
                    } else {
                        Toast('获取图片详情失败了。。。')
                    }
                })
            },
            getThumbs() {   //获取缩略图数据
                this.$http.get('api/getthumimages/' + this.id).then(result => {
                    if (result.body.status === 0) {
                        //成功
                        // 循环每个图片数据，补全图片的宽和高
                        result.body.message.forEach(item => {
                            item.w = 600
                            item.h = 400
                            item.msrc = item.src
                        })
                        // 把完整的数据保存到 list 中
                        this.list = result.body.message
                    }
                })
            },
            handleClose () {
                console.log('close event')
            }
        },
        components: {
            'cmt-box': comment   //注册子组件
        }
    }
</script>

<style scoped lang="scss" type="text/scss">
    .photoinfo-container {
        padding: 3px;

        h1 {
            text-align: center;
            font-size: 18px;
            color: #26a2ff;
            margin: 15px 0;
        }

        hr {
            border: 0;
            border-top: 1px #cccccc solid;
        }

        .subtitle {
            display: flex;
            justify-content: space-between;
        }

        .content {
            font-size: 12px;
            line-height: 30px;
        }
        .thumbs{
            /*vue组件中，在style设置为scoped的时候，里面在写样式对子组件是不生效的，*/
            /*如果想让某些样式对所以子组件都生效，可以使用 /deep/ 深度选择器。           */
            /deep/.my-gallery {
                display: flex;
                flex-wrap: wrap;
                figure {
                    width: 30%;
                    margin: 5px;
                    img{
                        width: 100%;
                        box-shadow: 0 0 8px #999;
                    }
                }
            }
        }
    }
</style>